<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import { getProjectList } from '@/api/ShopDatabase/project.js';
import { useDistInfoStore } from '@/stores/dict.js';
import { getBaseSetting } from '@/api/ShopDatabase/goodsSetting.js';
import { getFieldValue } from '@/utils/common.js'
const seachTable = ref(null);
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();
const distInfoStore = useDistInfoStore();
// 新增编辑回退时候刷新列表
onActivated(()=>{
  let closeTagName = sessionStorage.getItem('closeTagName');
  if(closeTagName == 'ProjectManagementEdit'){ //编辑退回时
      seachTable.value.handlerSearch(); //刷新当前页
      
  }else if(closeTagName == 'ProjectManagementAdd'){ //新增退回时
      seachTable.value.initSearch(); //返回第一页并刷新
  }
  instance.proxy.$forceUpdate(); //重新渲染demo
  sessionStorage.removeItem('closeTagName'); //溢出缓存中的tag名
})
const formInline = ref([
    {
      type: "datePicker",
      prop: ["startDate", "endDate"],
      startPlaceholder: "创建开始时间",
      endPlaceholder: "创建结束时间",
      label: "",
      model: [],
    },
    {
      type: "input",
      prop: "fuzzyValue",
      placeholder: "项目名称/编号/助记码",
      label: "",
      model: "",
    },
    {
        type: "select",
        placeholder: "经营品牌",
        label: '',
        prop: 'businessBrandId',
        multiple:true,
        data:distInfoStore.getDistInfo("经营品牌").map(lis=>{
          return {
            value:lis.id,
            label:lis.permissionName
          }
        }),
        model: '',
    },
    {
        type: "select",
        placeholder: "销售分类",
        filterable:true,
        label: '',
        prop: 'salesClassIdList',
        data:[],
        multiple:true,
        model: [],
    },
    {
        type: "select",
        placeholder: "销售状态",
        filterable:true,
        label: '',
        prop: 'salesState',
        data:[
            {
                label:"正常",
                value:1
            },
            {
                label:"停售",
                value:2
            }
        ],
        model: "",
    },
    {
      type: "input",
      prop: "createByName",
      placeholder: "创建人",
      label: "",
      model: "",
    },
    {
        type: "select",
        placeholder: "是否关联耗材",
        label: '',
        prop: 'existsDisposables',
        data:[
            {
                label:"是",
                value:1
            },
            {
                label:"否",
                value:0
            }
        ],
        model: "",
    },
])

const btnLefts = ref([
    {
      label:'新增项目',
      type:'primary',
      show:()=>true,
      img:new URL("@/assets/icon/btn-add.png",import.meta.url),
      click:()=>{
        router.push({name:'ProjectManagementAdd'})
      } 
    },
])
const btnRights = ref([
])

const tableConfig = ref([
    {
      prop: "code",
      label: "项目编号",
      type:"slot",
      slotName:'code',
      width:150
    },
    {
      prop: "projectName",
      label: "项目名称",
      type:"slot",
      slotName:'projectName',
      width:310
    },
    {
      prop: "businessBrandId",
      label: "经营品牌",
      width:300,
      format:(value)=>{

        let businessBrandId = value.split(',');

        let strArr = distInfoStore.getDistInfo("经营品牌").filter(lis=>{
          return businessBrandId.includes(lis.id)
        }).map(lis=>lis.permissionName)
        return strArr.join('、');
      }
    },
    {
      prop: "salesClass",
      label: "销售分类",
      width:100
    },
    {
      prop: "retailPrice",
      label: "零售价",
      width:100
    },
    {
      prop: "existsDisposables",
      label: "关联耗材",
      width:200,
      format:(value)=>{
        return ["否","是"][value]
      }
    },
    {
      prop: "salesState",
      label: "销售状态",
      width:100,
      format:(value)=>{
        return ["","正常","停售"][value]
      }
    },
    {
      prop: "mallInfoPut",
      label: "允许上架商城",
      width:120,
      format:(value)=>{
        return ["", "允许","不允许"][value]
      }
    },

    {
      prop: "createByName",
      label: "创建人",
      width:100
    },
    {
      prop: "createTime",
      label: "创建时间",
      width:250
    },
    {
      prop: "updateTime",
      label: "最近更新",
      width:250
    },

    {
      type: "action",
      label: "操作",
      width: 200,
      btns: [
        {
          label: () => "编辑",
          type:"success",
          click: async (row) => {
            router.push({name:'ProjectManagementEdit',query:{id:row.id}})
          },
        },
        {
          label: () => "详情",
          type:"primary",
          click: async (row) => {
            router.push({name:'ProjectManagementDetail',query:{id:row.id}})
          },
        },

      ],
    },
]);
const classInfo = ref([]);
const _getBaseSetting = async ()=>{

    try{
        let result = await getBaseSetting();
        classInfo.value =  getFieldValue('销售分类',result,'id');
        console.log(23232)
        formInline.value[3].data = classInfo.value;
    }catch(e){
      console.log(e);
    }
}
_getBaseSetting();
const tableLoading = ref(false)
const totalPage = ref(0)
const tableData = ref([]);


const handlerSearch = async (formInline)=>{
    tableLoading.value = true;
    try{
        formInline.businessBrandId = formInline.businessBrandId.join(',')
        let result = await getProjectList(formInline)
        totalPage.value = Number(result.total);
        tableData.value = result.records;
        tableLoading.value = false;
    }catch(e){
        tableLoading.value = false;
    }
}
const img1 = ref(new URL("@/assets/images/login-bg3.png",import.meta.url))
const goToDetail = (uuid)=>{
  router.push({name:"ProjectManagementDetail",query:{id:uuid}})
}
</script>
<template>
    <div class="page-content">
        <SeachTable 
          :tableType="1"
          ref="seachTable"
          :forms="formInline"
          :btnLefts="btnLefts"
          :btnRights="btnRights"
          :tableLoading="tableLoading"
          :tableConfig="tableConfig"
          :tableData="tableData"
          :totalPage="totalPage"
          @handlerSearch="handlerSearch"

        >
            <template #code="{ row }">
                <div class="a-link" @click="goToDetail(row.id)">{{ row.code }}</div>
            </template>
            <template #projectName="{ row }">
                <div class="project-info">
                    <div class="img">
                        <el-image
                          :src="row.firstPicture || 'https://static.91medicine.net/jiuyang/img/404.png'"
                          :zoom-rate="1.2"
                          :preview-src-list="[row.firstPicture || 'https://static.91medicine.net/jiuyang/img/404.png']"
                          :initial-index="4"
                          style="width:100%;height:100%"
                        />
                    </div>
                    <div class="name-info">
                      <div class="info-show" >
                          <el-tooltip placement="top">
                            <template #content>
                                <div class="tips-info">
                                  {{ row.projectName }}
                                </div>
                            </template>
                            <span class="tip-show">
                              {{ row.projectName }}
                            </span>
                          </el-tooltip>
                      </div>
                    </div>
                </div>
            </template>
        </SeachTable>
    </div>
</template>
<style lang="less" scoped>
.tips-info{
    max-width: 300px; 
}
.info-show{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .tip-show{
        max-width: 100%;
        box-sizing:border-box;
        padding-right:4px;
        font-weight: 400;
        color: #222222;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .text-show{
        max-width: calc(100% - 14px);
        box-sizing:border-box;
        padding-right:4px;
        font-weight: 400;
        color: #222222;
        line-height: 18px;
        word-break: break-all;
        word-wrap: break-word;
    }
    .img{
        width: 14px;
        height: 14px;
        cursor: pointer;

    }
}
.a-link{
    color:#3480FF;
    font-size: 14px;
    cursor: pointer;
}
.project-info{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .img{
        width: 48px;
        height: 48px;

    }
    .name-info{
        width:calc(100% - 56px);
        box-sizing: border-box;
        padding-left:8px;
        .p1{
            width: 100%;
            color: #222222;
            font-weight: bold;
            line-height: 14px;
            font-size: 14px;
            height: 14px;
        }
        .p2{
            width: 100%;
            margin-top:8px;
            color: #666666;
            line-height: 14px;
            font-size: 14px;
            height: 14px;
        }
    }
}
</style>